<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="充值卡" bgColor="#F5F5F5" @leftClick="backClick">	
			</u-navbar>
		</view>
		
		<view class="top-bg">
			<view class="flex-col" style="margin-left: 30rpx;margin-right: 30rpx;padding-top: 10rpx;">
				<image :src="staticResource('user/scan_recharge.png')" style="height: 400rpx;width: 90vw;"></image>
				<view class="center-bg">
					
					<view class="flex-row justify-between">
						<view>{{reInfo.typeName}}</view>
						<view>{{reInfo.money}}</view>
					</view>
					<view class="flex-row justify-between" style="margin-top: 20rpx;">
						<view>使用状态</view>
						<view>{{reInfo.stateName}}</view>
					</view>
					<view class="flex-row justify-between" style="margin-top: 20rpx;">
						<view>有效期</view>
						<view style="width: 70%;text-align: end;">{{reInfo.expired_time}}</view>
					</view>
					
				</view>
			</view>
			
			<view :class="reInfo.state == 0 ? 'btn' : 'btn1' " @click="rechargeSubmit">{{reInfo.state == 0 ? '立即使用' : reInfo.stateName}}</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showBack:1,
				qcode:'',
				sign:'',
				reInfo:{}
			};
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		onLoad(op) {
			if(op.url){///小程序扫码支付
				this.showBack = 1;
				console.log("小程序:"+decodeURIComponent(op.url))
				const scanUrl = decodeURIComponent(op.url);
				const params = this.parseQueryString(scanUrl)
				if('qcode' in params && 'sign' in params){
					this.qcode = params.qcode
					this.sign = params.sign
				}
			}else{ ///微信扫码
				this.showBack = 2;
				const q = decodeURIComponent(op.q)
				const params = this.parseQueryString(q)
				if('qcode' in params && 'sign' in params){
					this.qcode = params.qcode
					this.sign = params.sign
				}
			}
		},
		onShow() {
			this.getRechargeInfo();
		},
		methods:{
			getRechargeInfo(){
				this.$request({
					url:'?c=Recharge&a=ScanRechargeInfo',
					type:'post',
					data:{
						qcode:this.qcode,
						sign:this.sign
					}
				}).then(res =>{
					// console.log(res)
					this.reInfo = res.data;
				})
			},
			rechargeSubmit(){
				let that = this;
				if(that.reInfo.state != 0){
					return;
				}
				uni.showModal({
					title:  '提示',
					content: '确认使用该充值卡吗？',
					cancelText: '取消',
					confirmText: '确定',
					confirmColor: '#007aff',
					success(res) {
						if (res.confirm) {
							that.toRecharge();
						}
					}
				})
			},
			toRecharge(){
				this.$request({
					url:'?c=Recharge&a=ScanRecharge',
					type:'post',
					data:{
						qcode:this.qcode,
						sign:this.sign
					}
				}).then(res =>{
					uni.showToast({
						title:'充值成功'
					});
					this.getRechargeInfo();
				})
			},
			
			parseQueryString(url) {
			  const query = {};
			  const urlParts = url.split('?');
			  
			  if (urlParts.length > 1) {
			    const queryString = urlParts[1];
			    const pairs = queryString.split('&');
			    
			    for (const pair of pairs) {
			      const [key, value] = pair.split('=');
			      query[decodeURIComponent(key)] = decodeURIComponent(value || '');
			    }
			  }
			  
			  return query;
			},
			backClick(){
				if(this.showBack == 1){
					uni.navigateBack()
				}else{
					uni.switchTab({
						url:'/pages/index/index'
					})
				}
			},
			staticResource(path){
				return "https://ysmz.scmzhc.com/static/mini/images/"+path;
			},
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
	background-image: linear-gradient(rgb(230,239,255), rgb(245,245,245));
}
.top-bg{
	height: 85vh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}
.center-bg{
	background-image: url("https://ysmz.scmzhc.com/static/mini/images/user/scan_recharge_white.png");
	background-size: 100% 100%; /* 拉伸图片以适应容器大小 */
	padding: 40rpx 30rpx 25rpx;
	margin-top: 15rpx;
	font-size: 35rpx;
}
.btn{
	width: 72%;
	height: 88rpx;
	border-radius: 10rpx;
	color: #fff;
	justify-content: center;
	display: flex;
	align-items: center;
	font-size: 32rpx;
	background-color: #e64f53;
}
.btn1{
	width: 72%;
	height: 88rpx;
	border-radius: 10rpx;
	color: #fff;
	justify-content: center;
	display: flex;
	align-items: center;
	font-size: 32rpx;
	background-color: #999;
}
</style>
